<template>
  <div class="pickup-stores-page">
    <div class="header">
      <h1>我的自提店</h1>
    </div>
    <div class="content">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>当前自提店</span>
        </div>
        <el-table :data="dqAddress" style="width: 100%" row-key="id" :current-row-key="selectedStoreId"
          highlight-current-row>
          <el-table-column type="selection" width="55">
          </el-table-column>
          <el-table-column label="店铺图片" width="260">
            <template v-slot="scope">
              <img :src="scope.row.img_url" alt="商品图片" style="width: 110px; height: 100px;">
            </template>
          </el-table-column>
          <el-table-column prop="merchantName" label="店铺名称" width="200"></el-table-column>
          <el-table-column prop="merchantAddr" label="地址" ></el-table-column>
          <el-table-column width="200">
            <template slot-scope="scope">
              <el-button type="danger" plain icon="el-icon-error" @click="contactStore(scope.row)">删除地址</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>

    <div class="content">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>自提店列表</span>
        </div>
        <el-table :data="pickupStores" style="width: 100%">
          <el-table-column type="selection" width="55">
          </el-table-column>
          <el-table-column label="店铺图片" width="260">
            <template v-slot="scope">
              <img :src="scope.row.img_url" alt="商品图片" style="width: 110px; height: 100px;">
            </template>
          </el-table-column>
          <el-table-column prop="merchantName" label="店铺名称" width="200"></el-table-column>
          <el-table-column prop="merchantAddr" label="地址"></el-table-column>
          <el-table-column width="200">
            <template slot-scope="scope">
              <el-button type="danger" plain icon="el-icon-error" @click="contactStore(scope.row)">删除地址</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dqAddress: [
        {
          id: 1,
          img_url: 'http://localhost:10002/84aba5ff-880f-4758-b110-b4c5ab226560.jpg', // 这里是图片URL，你需要从数据库获取  
          merchantName: '一家小吃店',
          merchantAddr: '湖南省长沙市岳麓区学士街道茯苓路30号',
        },
      ],
      pickupStores: [
        {
          id: 2,
          img_url: 'http://localhost:10002/d2e5d428-6877-4f14-bd47-ed065d44ae85.jpeg', // 这里是图片URL，你需要从数据库获取  
          merchantName: '自提店A',
          merchantAddr: '地址A'
        },
        {
          id: 3,
          img_url: 'http://localhost:10002/c84feed0-a343-47b1-8fa8-ff3405b4e6d6.jpg',
          merchantName: '自提店B',
          merchantAddr: '地址B'
        },
        // ...更多自提店数据  
      ],
      selectedStoreId: 1, // 初始时选中自提店A 
    };
  },
  watch: {
    // 监听 pickupStores 的变化，确保 selectedStoreId 对应的行仍然存在  
    pickupStores(newStores) {
      const found = newStores.find(store => store.id === this.selectedStoreId);
      if (!found) {
        // 如果 selectedStoreId 对应的行不再存在，你可以选择一个默认的行，或者清空 selectedStoreId  
        // 这里假设我们选择一个默认的自提店（如果有的话）  
        const defaultStore = newStores[0];
        if (defaultStore) {
          this.selectedStoreId = defaultStore.id;
        } else {
          this.selectedStoreId = null; // 或者你可以清空选中状态  
        }
      }
    }
  },
  methods: {
    navigateToStore(store) {
      // 这里可以使用地图 API 或其他方式实现导航功能  
      console.log('导航到', store.address);
    },
    contactStore(store) {
      // 这里可以实现联系老板的功能，比如打开电话应用等  
      console.log('联系', store.name);
    },
    selectStore(id) {
      this.currentStoreId = id; // 设置当前选中的自提店 ID  
    },
  },
};  
</script>

<style scoped>
.pickup-stores-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 120vh;
  padding: 20px;
  box-sizing: border-box;
}

.header {
  text-align: center;
  margin-bottom: 20px;
}

.content {
  width: 100%;
  max-width: 1000px;
}

.box-card {
  border: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  margin-bottom: 10px;
}

.el-table {
  margin-top: 0 !important;
  /* Override default margin */
}

.el-table .cell {
  padding: 12px 0;
}

.el-button {
  margin-right: 10px;
}

.el-button+.el-button,
.el-checkbox.is-bordered+.el-checkbox.is-bordered {
  margin-left: 0px;
}

.store-image {
  width: 80px;
  /* 设置图片宽度 */
  height: 80px;
  /* 设置图片高度 */
  object-fit: cover;
  /* 保持图片的宽高比 */
  border-radius: 50%;
  /* 可选：设置圆角 */
}
</style>